<!--
 * @Date: 2020-12-28 15:31:26
 * @LastEditTime: 2020-12-31 14:16:21
 * @FilePath: /show/src/views/home/index.vue
 * @Author: twy
 * @LastEditors: twy
-->
<template>
  <div id="home">
    <div class="content">
      Landscape photographer based in Boulder, Colorado.
    </div>
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <div v-for="(item,index) in imageList" :key="index" class="swiper-slide">
          <div :style="{width: '80%',height: '60%', background: `url(${item})`,backgroundRepeat: 'no-repeat'}"></div>
          <div class="inner_content">
            这里是内容！
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      swiper: null,
      imageList: [
        './bg.jpg',
        './bg.jpg',
        './bg.jpg',
        './bg.jpg'
      ]
    }
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    },
  },
  mounted() {
    this.swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
    })
  }
}
</script>

<style scoped>
.content {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
#home {
  width: 100%;
}
.swiper-container {
  width: 100%;
  height: 600px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tail {
  display: flex;
  height: 300px;
}
.left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-family: 'Cormorant Garamond';
}
.right{
  display: flex;
  flex: 1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.c_button {
  padding: 20px;
  border: none;
  background: #a8a6a1;
  color: white;
  margin-left: 40px;
  cursor: pointer;
}
.detail {
  line-height: 28px;
  width: 70%;
  font-weight: 300;
  font-size: 16px;
  padding: 40px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 150px;
}
.inner_content {
  margin-top: 20px;
}
</style>